<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template #data-columns>

        <el-table-column
          label="课件名称"
          prop="fileName"
          align="left"
          show-overflow-tooltip
        />

        <el-table-column label="要求时长" align="center" width="150px">
          <template v-slot="scope">
            <div style="display: flex; justify-content: center">
              <sec-format :value="scope.row.needLearn"/>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="已学时长" align="center" width="150px">
          <template v-slot="scope">
            <div style="display: flex; justify-content: center">
              <sec-format :value="scope.row.learnSec"/>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="学习进度"
          align="center"
          width="100px"
        >

          <template v-slot="scope">
            {{ scope.row.process }} %
          </template>

        </el-table-column>

        <el-table-column
          label="最近学习"
          align="center"
          prop="updateTime"
          width="200px"
        />

        <el-table-column
          label="明细"
          align="center"
          width="350px"
        >

          <template v-slot="scope">
            <el-button type="warning" size="mini" @click="showCapture(scope.row.fileId)">抓拍记录</el-button>
            <el-button type="primary" size="mini" @click="showFace(scope.row.fileId)">刷脸记录</el-button>
            <el-button type="default" size="mini" @click="showDaily(scope.row.fileId)">每日明细</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :visible.sync="faceVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="860px"
      title="学习刷脸记录"

    >
      <course-face-list :course-id="courseId" :user-id="userId" :file-id="fileId"/>
    </el-dialog>

    <el-dialog
      :visible.sync="dailyVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      title="学习明细记录"
    >
      <learn-daily-paging :course-id="courseId" :user-id="userId" :file-id="fileId"/>
    </el-dialog>

    <el-dialog
      :visible.sync="captureVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      title="学习抓拍记录"
    >
      <course-capture-list :course-id="courseId" :user-id="userId" :file-id="fileId"/>
    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import CourseFaceList from '@/views/admin/course/learn/face'
import LearnDailyPaging from '@/views/admin/course/learn/daily'
import CourseCaptureList from '@/views/admin/course/learn/capture'
import SecFormat from '@/components/SecFormat'

export default {
  name: 'CourseFileLearnPaging',
  components: { SecFormat, CourseCaptureList, LearnDailyPaging, CourseFaceList, DataTable },
  props: {
    courseId: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: '',
          userId: ''
        }
      },

      options: {

        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/course/file/learn/paging'
      },

      fileId: null,
      faceVisible: false,
      dailyVisible: false,
      captureVisible: false
    }
  },
  watch: {

    // 检测查询变化
    courseId: {
      handler(val) {
        this.listQuery.params.courseId = val
        this.$refs.pagingTable.getList()
      }
    },
    userId: {
      handler(val) {
        this.listQuery.params.userId = val
        this.$refs.pagingTable.getList()
      }
    }
  },

  created() {
    this.listQuery.params.courseId = this.courseId
    this.listQuery.params.userId = this.userId
  },

  methods: {
    showFace(fileId) {
      this.fileId = fileId
      this.faceVisible = true
    },

    showDaily(fileId) {
      this.fileId = fileId
      this.dailyVisible = true
    },

    showCapture(fileId) {
      this.fileId = fileId
      this.captureVisible = true
    }
  }
}
</script>
